<template>
  <div class="app-container">
    实训单位查询
    <el-row type="flex" class="row-bg" justify="center" :gutter="20">
      <el-col :span="12">
      <el-input
      placeholder="请输入单位名称"
      prefix-icon="el-icon-search" clearable v-model="param.companyName">
      </el-input>
      </el-col>
      <el-col :span="4">
    <el-button icon="el-icon-search" circle @click="selectCompany"></el-button>
      </el-col>
    </el-row>
    <div style="margin-left:1%;margin-right:1%">        
      <el-row :gutter="24">            
          <el-col :span="8" v-for="(item) in tabledata" :key="item.classId" >                
            <div style="margin-top:15px">                    
              <el-card :body-style="{ padding: '0px'}" shadow="hover">
                <a  @click="detail(item)">
                    <div>
                      <br>
                        <span style="text-align: center;display:block; font-size:22px ">{{item.companyName}}</span>
                      <br>   
                    </div>
                    <div>
                      <el-image  style=" min-height:250px" :src="item.pictureUrl1" :fit="fit"></el-image>            
                    </div>
                    <div class="bottom clearfix">                    
                      <time class="time"><strong>创建时间:</strong>{{item.createTime}}</time>
                      <template>
                        <el-button type="primary" @click="passCompny(item)">审核通过</el-button>
                      </template>                    
                    </div>                
                  </a>            
              </el-card>                
            </div>            
          </el-col>
      </el-row>      
    </div>
    <!--分页组件-->
<el-pagination background layout="prev, pager, next"  prev-text="上一页"
        next-text="下一页"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="currpage"
        :page-size="pageSize"
        :total="total"></el-pagination>
    <el-dialog :visible.sync="dialogVisible" :title="dialogTitle">
      角色列表<br/><br/>
      <el-checkbox-group v-model="checkedList">
        <el-checkbox v-for="(role, index) in roleList" :key="index" :label="role.rlName"></el-checkbox>
      </el-checkbox-group>
      <br/>
      <div style="text-align:right;">
        <el-button type="danger" @click="dialogVisible=false">取消</el-button>
        <el-button type="primary" @click="confirmUser">提交</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
import { getVerifyCompanyList,passCompny} from '@/api/company'
const defaultUser = {
  urId: 0,
  urUserName: '',
  urSalt: '',
  introduction: '',
  avatar: '',
  name: ''
  
}

export default {
  data() {
    return {
      user: Object.assign({}, defaultUser),
      userList: [],
      dialogVisible: false,
      dialogTitle: '',
      roleList: [],
      checkedList: [],
      param :{
      start: 0,
      limit: 12,
      companyName:''
      },
      pageSize: 12, //每一页的数据大小
      currpage: 1, //当前页
      total:0,//总条数
      currentDate: new Date(),
      tabledata:[
      ],
      vifyParms:{
          internshipId:''
      }
    }
  },
  computed: {
    routesData() {
      return this.routes
    }
  },
  //页面打开时执行的方法
  created() {
    this.getCompanyList()
  },
  methods: {
    async getCompanyList() {
      let res = await getVerifyCompanyList(this.param)
      this.tabledata = res.beans
      this.total = res.bean.total
    },
    //页大小变化
     handleSizeChange(val) {
      this.pageSize = val;
      this.param.start = this.pageSize*(this.currpage-1)
      this.getCompanyList();
    },
    //页标号变化
    handleCurrentChange(val) {
      this.currpage = val;
      this.param.start = this.pageSize*(this.currpage-1)
      this.getCompanyList();
    },
    selectCompany(){
      this.param.start = 0;
      this.param.limit = 12;
      this.currpage = 1;
      this.getCompanyList()
    },
    //进入实训单位详情
    detail(item){
      this.$router.push({
        path: "/verifyCompanyDetail",
        query:{
          companyId:item.internshipId
        }
        })
    },
    //审核通过
    passCompny(item){
       this.$confirm('确认审核通过该实训单位', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
            
        this.vifyParms.internshipId = item.internshipId
         passCompny(this.vifyParms).then(()=>{
            this.$message({
              type: 'success',
              message: '审核成功!'
            })
            this.getCompanyList()
            }
          ).catch(err=>{
            this.$message({
              type: 'error',
              message: '审核失败!'
            })
            })
            
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消审核'
          });          
        });


    }
  }
}
</script>

<style lang="scss" scoped>
.app-container {
  .roles-table {
    margin-top: 30px;
  }
  .permission-tree {
    margin-bottom: 30px;
  }
}
 .time {
    font-size: 13px;
    color: #999;
  }
  
  .bottom {
    margin-top: 13px;
    line-height: 12px;
  }

  .button {
  }

  .image {
    width: 100%;
    display: block;
  }

  .clearfix:before,
  .clearfix:after {
      display: table;
      content: "";
  }
  
  .clearfix:after {
      clear: both
  }

</style>
